<template>
    <div class="whole">
        <div class="top">
            <img src="http://www.yhachina.com/images/membership/apply-process1.jpg" alt="">
        </div>

        <div class="bottom">
            <div class="bottom_bar">
                <h2> 填写会员信息 </h2>
                <div class="message">
                    <div class="attention">为了我们能更好地为您服务，请正确填写您 的注册资料及联系方式，“ <span>*</span> ”表示必填内容。您可一次申请多张会员卡</div>

                    <div class="container">
                        <div class="container_bar">

                            <div class="type">
                                <h4>申请卡类型：</h4>
                                <ul>
                                    <li>
                                        <div class="left">
                                            <img src="http://www.yhachina.com/images/membership/membership-four-list1.jpg" alt="">
                                        </div>
                                        <div class="right">
                                            <p>国际青年旅舍<font>®</font>会员卡</p>
                                            <span>50元 / 年</span>
                                        </div>
                                        <div class="icon">

                                        </div>

                                    </li>

                                    <li>
                                        <div class="left">
                                            <img src="http://www.yhachina.com/images/membership/membership-four-list2.jpg" alt="">
                                        </div>
                                        <div class="right">
                                            <p>国际青年旅舍<font>®</font>终身会员卡</p>
                                            <span>500元 终身有效</span>
                                        </div>
                                        <div class="icon"></div>
                                        
                                        
                                    </li>
                                </ul>
                            </div>
                            
                            <div class="request">
                                <h3>国际青年旅舍<font>®</font>终身会员卡仅限18周岁及以上的中国大陆公民申请</h3>
                                <ul>
                                    <li>
                                        <label>
                                            <i>*</i>
                                            中文姓名
                                        </label>
                                        <input type="text">
                                        <span>需与护照或有效证件相符</span>
                                    </li>
                                    <li>
                                        <label>
                                            <i>*</i>
                                            英文（拼音）姓名：
                                        </label>
                                        <input type="text">
                                        <span>需与护照或有效证件相符，请按此格式示例输入：Da San</span>
                                    </li>
                                    <li>
                                        <label>
                                            <i>*</i>
                                            出生日期：
                                        </label>
                                        <select>
                                            <option>--请选择--</option>
                                            <option value="">2022</option>
                                            <option value="">2021</option>
                                            <option value="">2020</option>
                                            <option value="">2019</option>
                                            <option value="">2018</option>
                                            <option value="">2017</option>
                                            <option value="">2016</option>
                                            <option value="">2015</option>
                                            <option value="">2014</option>
                                            <option value="">2013</option>
                                            <option value="">2012</option>
                                            <option value="">2011</option>
                                            <option value="">2010</option>
                                            <option value="">2009</option>
                                            <option value="">2008</option>
                                            <option value="">2007</option>
                                            <option value="">2006</option>
                                            <option value="">2005</option>
                                            <option value="">2004</option>
                                            <option value="">2003</option>
                                            <option value="">2002</option>
                                            <option value="">2001</option>
                                            <option value="">2000</option>
                                            <option value="">1999</option>
                                            <option value="">1998</option>
                                            <option value="">1997</option>
                                            <option value="">1996</option>
                                            <option value="">1995</option>
                                            <option value="">1994</option>
                                            <option value="">1993</option>
                                            <option value="">1992</option>
                                            <option value="">1991</option>
                                            <option value="">1990</option>
                                            <option value="">1989</option>
                                            <option value="">1988</option>
                                            <option value="">1987</option>
                                            <option value="">1986</option>
                                            <option value="">1985</option>
                                            <option value="">1984</option>
                                            <option value="">1983</option>
                                            <option value="">1982</option>
                                            <option value="">1981</option>
                                            <option value="">1980</option>
                                            <option value="">1979</option>
                                            <option value="">1978</option>
                                            <option value="">1977</option>
                                            <option value="">1976</option>
                                            <option value="">1975</option>
                                            <option value="">1974</option>
                                            <option value="">1973</option>
                                            <option value="">1972</option>
                                            <option value="">1971</option>
                                            <option value="">1970</option>
                                            <option value="">1969</option>
                                            <option value="">1968</option>
                                            <option value="">1967</option>
                                            <option value="">1966</option>
                                            <option value="">1965</option>
                                            <option value="">1964</option>
                                            <option value="">1963</option>
                                            <option value="">1962</option>
                                            <option value="">1961</option>
                                            <option value="">1960</option>
                                            <option value="">1959</option>
                                            <option value="">1958</option>
                                            <option value="">1957</option>
                                            <option value="">1956</option>
                                            <option value="">1955</option>
                                            <option value="">1954</option>
                                            <option value="">1953</option>
                                            <option value="">1952</option>
                                            <option value="">1951</option>
                                            <option value="">1950</option>
                                            <option value="">1949</option>
                                            <option value="">1948</option>
                                            <option value="">1947</option>
                                            <option value="">1946</option>
                                            <option value="">1945</option>
                                            <option value="">1944</option>
                                            <option value="">1943</option>
                                            <option value="">1942</option>
                                            <option value="">1941</option>
                                            <option value="">1940</option>
                                            <option value="">1939</option>
                                            <option value="">1938</option>
                                            <option value="">1937</option>
                                            <option value="">1936</option>
                                            <option value="">1935</option>
                                            <option value="">1934</option>
                                            <option value="">1933</option>
                                            <option value="">1932</option>
                                            <option value="">1931</option>
                                            <option value="">1930</option>
                                            <option value="">1929</option>
                                            <option value="">1928</option>
                                            <option value="">1927</option>
                                            <option value="">1926</option>
                                            <option value="">1925</option>
                                            <option value="">1924</option>
                                            <option value="">1923</option>
                                            <option value="">1922</option>
                                            <option value="">1921</option>
                                            <option value="">1920</option>
                                            <option value="">1919</option>
                                            <option value="">1918</option>
                                            <option value="">1917</option>
                                            <option value="">1916</option>
                                            <option value="">1915</option>
                                            <option value="">1914</option>
                                            <option value="">1913</option>
                                            <option value="">1912</option>
                                            <option value="">1911</option>
                                            <option value="">1910</option>
                                            <option value="">1909</option>
                                            <option value="">1908</option>
                                            <option value="">1907</option>
                                            <option value="">1906</option>
                                            <option value="">1905</option>
                                            <option value="">1904</option>
                                            <option value="">1903</option>
                                            <option value="">1902</option>
                                            <option value="">1901</option>
                                            <option value="">1900</option>
                                        </select>年
                                        <select>
                                            <option>--请选择--</option>
                                            <option value="">1</option>
                                            <option value="">2</option>
                                            <option value="">3</option>
                                            <option value="">4</option>
                                            <option value="">5</option>
                                            <option value="">6</option>
                                            <option value="">7</option>
                                            <option value="">8</option>
                                            <option value="">9</option>
                                            <option value="">10</option>
                                            <option value="">11</option>
                                            <option value="">12</option>
                                        </select>月

                                        <select>
                                            <option>--请选择--</option>
                                            <option value="">1</option>
                                            <option value="">2</option>
                                            <option value="">3</option>
                                            <option value="">4</option>
                                            <option value="">5</option>
                                            <option value="">6</option>
                                            <option value="">7</option>
                                            <option value="">8</option>
                                            <option value="">9</option>
                                            <option value="">10</option>
                                            <option value="">11</option>
                                            <option value="">12</option>
                                        </select>日

                                    </li>
                                    <li>
                                        <label>
                                            <i>*</i>
                                            性别：
                                        </label>

                                        <select name="" id="">
                                            <option value="">男</option>
                                            <option value="">女</option>
                                        </select>
                                    </li>
                                    <li>
                                        <label for="">
                                            <i>*</i>
                                            国家 / 地区：
                                        </label>
                                        <input type="text" placeholder="中国">
                                    </li>
                                    <li>
                                        <label for="">
                                            <i>*</i>
                                            证件类型：
                                        </label>
                                        <select name="" id="long">
                                            <option value="">二代身份证</option>
                                            <option value="">护照</option>
                                            <option value="">港澳通行证</option>
                                            <option value="">回乡证</option>
                                            <option value="">台胞证</option>
                                            <option value="">中国居留许可</option>
                                            <option value="">驾驶证</option>
                                            <option value="">军官证</option>
                                            <option value="">士兵证</option>
                                        </select>
                                    </li>
                                    <li>
                                        <label for="">
                                            <i>*</i>
                                            证件号：
                                        </label>
                                        <input type="text">
                                    </li>
                                    <li>
                                        <label for="">
                                            <i>*</i>
                                            手机号码：
                                        </label>
                                        <input type="text">
                                        <span>请准确填写，以便接收您使用预订旅舍服务的反馈提示</span>
                                    </li>
                                    <li>
                                        <label for="">
                                            <i>*</i>
                                            电子邮箱：
                                        </label>
                                        <input type="text">
                                        <span>请准确填写您的常用有效邮箱，以便确认您 的预订服务</span>
                                        <p>当您忘记本站注册密码时，系统会把密码发送到您的注册邮箱。</p>
                                    </li>
                                </ul>
                                <div class="logo">
                                    <span>
                            <svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" color="orange" fill="currentColor" class="bi bi-plus-circle" viewBox="0 0 16 16">
  <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
  <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
</svg>
                        </span>
                                    添加会员卡
                                </div>

                            </div>
                        </div>
                    </div>
                    </div>
                    <a href="">提交</a>
                </div>
            </div>
        </div>
    <!-- </div> -->
</template>

<script>
    export default {
        
    }
</script>

<style lang="scss" scoped>
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.whole{
    width: 100%;
    background-color: #f5f5f5;
    color: #333;
    >.top{
        text-align: center;
        padding-bottom: 35px;
        padding-top: 50px;
        >img{
            vertical-align: middle;
        }
    }
    >.bottom{
        background-color: #fff;
        border: 1px solid #efefef;
        width: 1080px;
        margin: 0 auto;
        border-radius: 10px;
        >.bottom_bar{
            padding: 20px;
            >h2{
                font-size: 18px;
                font-weight: bold;
                border-bottom: 1px solid #e2e2e2;
                padding-bottom: 7px;
            }
            >.message{
                >.attention{
                    line-height: 60px;
                    letter-spacing: 1px;
                    font-size: 14px;
                    >span{
                        color: #e2001c;
                    }
                }
                >.container{
                    >.container_bar{
                        margin-bottom: 20px;
                        border: 1px solid #eee;
                        border-top: none;
                        padding: 15px 30px;
                        >.type{
                            width: 974px;
                            // display: flex;
                            // justify-content: left;
                            >h4{
                                display: block;
                            }
                            >ul{
                                margin: 10px -30px 0 0;
                                display: flex;
                                justify-content: left;
                                >li{
                                    width: 313px;
                                    border: 3px solid #e5e5e5;
                                    margin-right: 17px;
                                    height: 95px;
                                    cursor: pointer;
                                    position: relative;
                                    display: flex;
                                    justify-content: space-between;
                                    &:hover{
                                        border-color: #f7941c;
                                        >.icon{
                                            display: block;
                                        }
                                    }

                                    >.left{
                                       >img{
                                        width: 65px;
                                        height: 40px;
                                         border-radius: 5px;
                                        top: 50%;
                                        box-shadow: 0 0 10px rgb(0 0 0 / 30%);
                                        position: absolute;
                                        margin-top: -20px;
                                        left: 20px;
                                       } 
                                    }  
                                    >.right{
                                        line-height: 180%;
                                        position: absolute;
                                        left: 105px;
                                        top: 20px;
                                        >p{
                                            font-size: 14px;
                                            >font{
				                                vertical-align: super;
				                                font-size: 50%;

			                                }
                                        }
                                        >span{
                                            font-size: 14px;
                                            font-weight: bold;
                                            color: #f7941c;
                                        }
                                    }
                                    >.icon{
                                        position: absolute;
                                        right: 0;
                                        bottom: 0;
                                        background-image: url(http://www.yhachina.com/css/app_z.png);
                                        width: 18px;
                                        height: 18px;
                                        background-position: -265px -169px;
                                        display: none;
                                    }
                                }
                            }
                        }
                        >.request{
                            margin-top: 30px;
                            >h3{
                                font-size: 16px;
                                font-weight: bold;
                                background-color: #fbfaf6;
                                height: 55px;
                                line-height: 55px;
                                border: 1px solid #e6e6e6;
                                text-indent: 35px;
                                >font{
				                    vertical-align: super;
				                    font-size: 50%;
                                }
                                
                            }
                            >ul{
                                margin-top: 30px;
                                list-style: none;
                                >li{
                                    line-height: 38px;
                                    color: #999;
                                    margin-bottom: 10px;
                                      
                                    >label{
                                        display: inline-block;
                                        width: 210px;
                                        text-align: right;
                                        font-size: 14px;
                                        >i{
                                            display: inline-block;
                                            color: #e2001c;
                                            margin-right: 5px;
                                        }
                                    }
                                    >select{
                                        margin: 0 10px;
                                        width: 100px;
                                        height: 38px;
                                        border: 1px solid #d1cfc2;
                                    }
                                    >#long{
                                        width: 250px;
                                    }
                                    >input{
                                        height: 38px;
                                        border: 1px solid #d1cfc2;
                                        line-height: 38px;
                                        padding-left: 5px;
                                        color: #333;
                                        width: 250px;
                                        margin: 0 10px;

                                    }
                                    >span{
                                        font-size: 14px;
                                    }
                                    >p{
                                        text-indent: 225px;
                                        font-size: 12px;
                                    }
                                }
                            }
                            >.logo{
                                font-size: 18px;
                                cursor: pointer;
                                margin-left: 35px;
                                color: #474747;
                            }
                        }
                    }
                }
            }
            >a{
                display: block;
                width: 180px;
                height: 45px;
                line-height: 45px;
                text-align: center;
                color: #fff;
                font-size: 16px;
                border-radius: 25px;
                background-color: #f7941c;
                margin: 30px auto 15px;
                text-decoration: none;
            }
        }
    }
}
</style>